<html>

<style>
table {
  border-collapse: separate;
  border-spacing: 0 1px;
}

thead th {
  background-color: #3F3C3C;
  color: white;
}

tbody td {
  background-color: #EEEEEE;
}

tr td:first-child,
tr th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>

<h2>Customer List</h2>
<!-- search: <br/><input type="text" ng-model="name"> -->

<input type="text" ng-model="name" class="search-query" placeholder="Search">
</br>

  Customer: <select ng-model="clist" ng-options="cust.Name+' ('+cust.custtype+')' for cust in customermast"></select>
<tt>Customer Details={{clist.custtype}}</tt>
</br>
<tt>Total Customers are ={{customermast.length}}</tt>

<table class="table table-hover table-striped table-condensed table-bordered"> 
  <thead>
    <tr>
      <th><a href="" ng-click="predicate = 'custid'; reverse=false">Id</a>
          (<a href="" ng-click="predicate = '-custid'; reverse=false">^</a>)</th>
      <th><a href="" ng-click="predicate = 'Name'; reverse=!reverse">Name</a></th>
      <th>Address</th>
      <th><a href="" ng-click="predicate = 'city'; reverse=!reverse">City</a></th>
      <th ng-click="setOrder('Phone')">Phone</th>
      <th>Email</th>
      <th><a href="" ng-click="predicate = 'custtype'; reverse=!reverse">Type</a></th>
	  <th>Invoice_File</th>
    </tr>
  </thead>
  <tbody>
      <tr ng-repeat="cust in customermast| filter: name | orderBy:predicate:reverse">
      <td>{{cust.custid}}</td>
      <td>{{cust.Name}}</td>      
      <td>{{cust.Address}}</td> 
      <td>{{cust.city}}</td> 
      <td>{{cust.phoneno}}</td> 
      <td>{{cust.email}}</td> 
      <td>{{cust.custtype}}</td> 
	  <td><a download href="invoice-2013-12-24-10-49-15.csv"> invoice file</a></td>
    </tr>
   <!-- <tr class="info">
            <td colspan="7">
               &nbsp;
            </td>
            <td>
             <!--   <strong>{{ Totalcustomer | custid }}</strong>  
            </td>
        </tr> -->
        
        <div ng-show="customermast.length == 0">
  <h3>No Customers Found</h3>
</div>
<div ng-show="totalPages > 1" class="align-center">
  <pagination num-pages="totalPages" current-page="filterCriteria.pageNumber" max-size="10" class="" boundary-links="true"
            on-select-page="selectPage(page)"></pagination>
</div>
  </tbody>
</table>


 </html>